<template>
	<view class="box-padding"  style="background-color: #FFFFFF;overflow: hidden;">
		<h3 class="u-text-center u-m-b-20">活动选择</h3>
		<view style="height: 500rpx;" class="u-flex u-row-center" v-show="loading">
			<u-loading mode="circle" color="#ff551a" size="40"></u-loading>
		</view>
		<view class="u-m-t-30 u-m-b-30" v-show="!loading">
			<view v-if="promotionList.length!==0">
				<view class="discout-container u-p-35" >
					<view class="discout-top u-flex">
						<view class="discout-top_item u-flex u-col-center u-row-center" >
							<view class="u-font-28" style="color: #999;">最大折扣</view>
							<view class="u-m-t-10 u-m-b-30 u-font-40" style="font-weight: 500;">{{maxDiscount||100}}%</view>
						</view>
						<view class="discout-top_item u-flex u-col-center u-row-center">
							<view class="u-font-28" style="color: #999;">当前折扣</view>
							<view class="u-m-t-10 u-m-b-30 u-font-40" :style="{fontWeight: 500,color:(nowDiscount>maxDiscount||nowDiscount==0)?'#219718':'#ff551a'}">
								<u-count-to :start-val="nowDiscount" :end-val="nowDiscount" :font-size="40" :decimals="2" 
								:color="(nowDiscount>maxDiscount||nowDiscount==0)?'#219718':'#ff551a'" ></u-count-to>%
							</view>
						</view>
					</view>
					<view class="discout-bot">
						<view class="u-flex u-row-center" v-if="nowDiscount<maxDiscount&&nowDiscount!=0">
							<u-icon name="info-circle" :color="'#ff551a'" size="26" ></u-icon>
							<text class="u-font-26" style="color: #ff551a;">所选活动已超最大折扣，请重新选择活动</text>
						</view>
						<view class="u-flex u-row-center" v-else>
							<u-icon name="checkmark-circle" :color="'#219718'" size="26"></u-icon>
							<text class="u-font-26" style="color: #219718;">可继续选择活动获得最优折扣</text>
						</view>
					</view>
				</view>
				<u-collapse class="activity-collapse"  :accordion="false" >
					<u-checkbox-group  shape="circle">
						<u-collapse-item  :open="item.checked" :title="item.name" v-for="(item, index) in promotionList" :isActivity="Boolean(item.disnum)" :key="item.id"
							style="width: 100%;border-bottom: 1px solid #E5E5E5;">
							<view slot="title"   class="u-flex u-row-between" style="flex:1;">
								<u-checkbox  @click.self="()=>{}" v-model="item.checked" :label-size="26" @change="chooseItemFn($event,item.disnum,index)" :name="item.id" active-color="#FFBB1A">
									<text >{{item.name}}</text>
								</u-checkbox >
									<view v-if="item.checked" >
										<text class="u-font-26" style="color:#ff551a" v-if="(item.promotionResult&2)!=0||(item.promotionResult&4)!=0">
											-￥{{item.totalReduce}}
											<!-- -￥{{item.promotionFree}} -->
										</text>
										<text class="u-font-26" style="color:#ff551a" v-else>赠品</text>
									</view>
							</view>
							<view class="u-p-b-20" style="box-sizing: border-box;">
								<view class="u-font-26" style="color: #999999;box-sizing: border-box;padding: 0 10rpx;"
									v-if="(item.promotionResult&1)!=0">
									赠品：
									<text class="u-font-26" v-for="i in item.salesPromotionResultItems" :key="i.id" style="color: #999999;">
										{{i.name+'*'+i.quantity}} {{i.unit||'瓶'}}
									</text>
								</view>
								<view class="u-font-26" style="color: #999999;box-sizing: border-box;padding: 0 10rpx;"
									v-if="(item.promotionResult&2)!=0">
									减钱：
									<text class="u-font-26" style="color: #999999;">
										订单减{{item.reduceMoney}}元
									</text>
								</view>
								<view class="u-font-26" style="color: #999999;box-sizing: border-box;padding: 0 10rpx;"
									v-if="(item.promotionResult&4)!=0">
									打折：
									<text class="u-font-26" style="color: #999999;">
										订单打{{(item.discount)/10}}折
									</text>
								</view>
								<view v-if="(item.promotionResult&2)!=0||(item.promotionResult&1)!=0" class="u-font-26 u-p-l-10 u-p-r-10" style="color:#219718">
									满足{{item.resultQuantity}}次
								</view>
							</view>
						</u-collapse-item>
						<u-collapse-item  style="width: 100%;border-bottom: 1px solid #E5E5E5;" :arrowItem="false">
							<view slot="title">
								<u-checkbox  v-model="noActivity" :name="''" @change="noActivityFn" :label-size="26" active-color="#FFBB1A">
									<text style="color:#ff551a;">不参与以上活动</text>
								</u-checkbox >
							</view>
						</u-collapse-item>
					</u-checkbox-group>
				</u-collapse>
				<u-button :disabled="true" class="u-m-t-20"  v-if="nowDiscount<maxDiscount&&nowDiscount!==0" >已超最大折扣，请重新选择</u-button>
				<u-button shape="circle"  class="u-m-t-20" hover-class="none" :ripple="true" :hair-line="false"
					:custom-style="getBtStyle('default', -1, 90, 28)"v-else  @click="sendActivity">确定</u-button>
			</view>
			<view v-else style="height: 500rpx;flex-direction: column;" class="u-flex u-row-center" >
				<image src="/static/mendian/shoouhou_kong.png" mode="widthFix" style="width: 500rpx;"></image>
				<view style="color: #ff551a;">没有可用活动~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import {useCartStore} from '@/store/cart.js';
	import { mapState } from 'pinia';
	export default{
		data(){
			return {
				promotionId:'',
				promotionList:[],
				disPriceList:[],
				maxDiscount:0,
				loading:false,
				noActivity:false,
			}
		},
		props:{
			itemlist:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		computed:{
			nowDiscount(){
				let num = 0;
				this.promotionList.forEach(item=>{
					if(item.checked){
						num=this.addFn(num,item.totalReduce);
					}
				});
				if(num!=0){
					let present = this.devFn(num,this.settlementInfo.total);
					let discount = this.subFn(1,present);
					return this.mulFn(discount,100).toFixed(2);
				}else{
					return 0
				}
				
			},
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useCartStore, ['settlementInfo'])
		},
		created(){
			this.getSettingFn();
			this.getPromotion();
		},
		methods:{
			sendActivity(){
				let obj = {
					promotionIdList:[],
					reducePrice:0,
					itemsList:[]
				};
				this.promotionList.forEach(item=>{
					if(item.checked){
						obj.reducePrice = this.addFn(obj.reducePrice,item.totalReduce);
						obj.promotionIdList.push(item.id);
						if((item.promotionResult&1)!=0){
							item.salesPromotionResultItems.forEach(child=>{
								child.itemNum = this.mulFn(child.quantity,item.resultQuantity);
							})
							obj.itemsList.push(...item.salesPromotionResultItems);
						}
					}
				});
				this.$emit('chooseActivity',obj);
			},
			noActivityFn(val){
				if(val.value){
					this.promotionList.forEach(item=>{
						item.checked = false;
					});
				}
			},
			// 阻止父级事件
			stopParent(){
				
			},
			async getSettingFn(){
				let params = {
					buyerId: this.storeShop.id,
					sellerId: this.settlementInfo.sellerShopId,
				}
				const res = await this.$newHttp.post('api/v1.2/Trade/GetSettings', params);
				console.log(res);
				if(res.code === 200){
					this.maxDiscount = (res.data.maxDiscount*100).toFixed(2)
				}else{
					this.maxDiscount = 0;
				}
			},
			chooseItemFn(val,disnum,index){
				if(val.value){
					this.noActivity = false;
				}
			},
			// 获取活动列表
			async getPromotion() {
				this.loading = true;
				let params = {
					buyerId: this.storeShop.id,
					sellerId: this.settlementInfo.sellerShopId,
					tradeOrderItems: this.settlementInfo.shoppingCartItems,
				}
				const res = await this.$newHttp.post('api/v1.2/SalesPromotion/GetSalesPromotionByTrade', params);
				this.loading = false;
				if(res.data.lenth!=0){
					this.promotionList = res.data.map(item=>{
						item.checked = true;
						return item;
					});
					this.choosePromotion = this.promotionList[0];
					this.promotionId = this.promotionList[0].id;
				}
				
			},
			mulFn(a,b){
			  return this.$mHelper.mul(a,b);
			},
			addFn(a,b){
			  return this.$mHelper.add(a,b);
			},
			subFn(a,b){
			  return this.$mHelper.sub(a,b);
			},
			devFn(a,b){
			  return this.$mHelper.dev(a,b);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activity-collapse{
		::v-deep .u-collapse-body{
			box-sizing: border-box;
			// padding-bottom: 20rpx;
		}
	}
	.discout-container{
		background-color: #f8f8f8;
		border-radius: 10rpx;
		.discout-top{
			.discout-top_item{
				flex-direction: column;
				flex:1;
			}
		}
	}
</style>